<script setup>
import {ref} from "vue";
import request5151 from "../../../utils/request5151.js";
import {ElMessage} from "element-plus";
import {useProgressStore} from "../../../stores/progressStore.js";
import {useRouter} from "vue-router";
const router = useRouter()
const progressStore = useProgressStore()
const IsHave = ref(false)
const roomSelectRef = ref()
// 选择宿舍信息
const roomSelect = ref({
  roomBuilding: '',
  roomNumber: '',
  bedNumber: ''
})
// 我的宿舍信息
const myRoomInfo = ref({
  buildingNumber: '',
  dormitoryNumber: '',
  bedNumber: '',
  location: ''
})
const roomSelectRules = {
  roomBuilding: [
    {required: true, message: '请选择宿舍楼', trigger: 'change'},
  ],
  roomNumber: [
    {required: true, message: '请输入宿舍号', trigger: 'blur'},
    {
      validator: (rule, value, callback) => {
        if (!/^[1-5][0-1][0-9]$/.test(value)) {
          callback(new Error('请输入正确的宿舍号'));
        } else {
          callback();
        }
      }
    }
  ],
  bedNumber: [
    {required: true, message: '请选择床位号', trigger: 'change'},
  ],
}

//判断是否已有宿舍信息
const getIsHave = () => {
  if (!sessionStorage.getItem('snumber')) {
    ElMessage.error('暂无信息');
    return
  }
  request5151({
    url: '/dormitoryallocation/isHaveRoom',
    method: 'get',
    params: {
      currentNumber: sessionStorage.getItem('snumber')
    }
  }).then(res => {
    if (res.data.code === 500) {
      myRoomInfo.value = res.data.data
      IsHave.value = true
    }
  }).catch(err => {
    ElMessage.error(err)
  })
}
getIsHave()
const OK = () => {
  roomSelectRef.value.validate((valid) => {
    if (valid) {
      //TODO 提交
      request5151({
        url: '/dormitoryallocation/selectRoom',
        method: 'post',
        params: {
          roomBuilding: roomSelect.value.roomBuilding,
          roomNumber: roomSelect.value.roomNumber,
          bedNumber: roomSelect.value.bedNumber,
          sNumber: sessionStorage.getItem('snumber')
        }
      }).then((res) => {
        if (res.data.code === 200) {
          ElMessage.success("选择成功")
          progressStore.setProgressR(1)
          roomSelectRef.value.resetFields()
          router.push('/reportAll/toPay')
          getIsHave()
        } else {
          ElMessage.error(res.data.message)
        }
      }).catch(err => {
        ElMessage.error(err)
      })
    }
  })
}
</script>

<template>
  <div class="roomSelect_All">
    <el-card style="width: 600px;">
      <h3>选择宿舍</h3>
      <el-form ref="roomSelectRef" :model="roomSelect" label-width="auto" :rules="roomSelectRules">
        <el-form-item label="宿舍楼" prop="roomBuilding">
          <el-select v-model="roomSelect.roomBuilding" placeholder="请选择宿舍楼">
            <el-option label="1号楼" value="1"></el-option>
            <el-option label="2号楼" value="2"></el-option>
            <el-option label="3号楼" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="宿舍号" prop="roomNumber">
          <el-input v-model="roomSelect.roomNumber" placeholder="请输入宿舍号"></el-input>
        </el-form-item>
        <el-form-item label="床位号" prop="bedNumber">
          <el-select v-model="roomSelect.bedNumber" placeholder="请选择床位号">
            <el-option label="1号床" value="1"></el-option>
            <el-option label="2号床" value="2"></el-option>
            <el-option label="3号床" value="3"></el-option>
            <el-option label="4号床" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="OK" v-if="!IsHave">确定</el-button>
          <el-button type="success" v-else disabled>已有宿舍信息</el-button>
          <el-button @click="roomSelectRef.resetFields()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="width: 600px;">
      <h3>我的宿舍信息</h3>
      <p>宿舍楼：{{ myRoomInfo.buildingNumber }}号楼</p>
      <p>宿舍号：{{ myRoomInfo.dormitoryNumber }}</p>
      <p>床位号：{{ myRoomInfo.bedNumber }}号床</p>
      <p>位置：{{ myRoomInfo.location }}</p>
    </el-card>
  </div>
</template>

<style scoped>
.roomSelect_All {
  text-align: center;
  display: flex;
  justify-content: space-between;
  padding: 50px;
}
</style>
